<template>
    <div class="title_box">
        <div class="title_left"> {{title}}</div>
        <div class="title_right">  <slot name=right></slot> </div>
    </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const props = defineProps({
  title: {
    type: [String, Number],
    default: '',
  },
})
const goToPage = (value) => {
  router.push({
    name: value
  })
}
</script>
<style lang="scss" scoped>
.title_box{
  display:flex;
  height: 30px;
  margin-top: 14px;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 10px;
  &::before{
    content: " ";
    height: 14px;
    width: 4px;
    background: #f50300;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
  }
  .title_right{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
  